<template>
  <div class="hello">
    <!-- 输入区域 -->
    <input
      type="text"
      v-model="inputValue"
      placeholder="请输入内容"
      @input="updateValue"
      style="width: 300px; padding: 10px;"
    />

    <!-- 输出区域 -->
    <div class="output-container">
      <div class="output">{{ inputValue }}</div>
      <button @click="clearContent" class="clear-button">清空</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    // 实时更新输出内容
    updateValue() {
      this.$emit('input-change', this.inputValue);
    },
    // 清空输入和输出内容
    clearContent() {
      this.inputValue = '';
      this.$emit('clear-content');
    },
  },
};
</script>

<style scoped>
/* 文字样式与 App.vue 中一致 */
.hello {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

/* 输入框样式 */
input {
  width: 300px;
  padding: 10px;
  margin-bottom: 20px;
}

/* 输出区域样式 */
.output-container {
  text-align: center; /* 确保输出内容居中 */
  margin: 0 auto;
}

/* 输出内容样式 */
.output {
  font-family: Avenir, Helvetica, Arial, sans-serif; /* 与 App.vue 中一致 */
  font-size: 32px;
  margin-bottom: 10px; /* 为清空按钮留出空间 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50; /* 与 App.vue 中一致 */
 font-weight: bold;
}

/* 清空按钮样式 */
.clear-button {
  display: block; /* 确保按钮垂直排列 */
  margin: 0 auto; /* 实现居中对齐 */
  padding: 5px 10px;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  color: #333;
  cursor: pointer;
  width: fit-content; /* 自适应按钮宽度 */
}
</style>
